<template>
    <scroll-view class="recom_scroll" scroll-y 
    @scrolltolower="hanleTolower" v-if="recommends.length>0">
        <!-- 推荐 -->
        <view class="recom_warp">
            <navigator class="recom_item"
            v-for = "item in recommends"
            :key = "item.id"
            :url ="`/pages/album/index?id=${item.target}`"
            >
                <image mode="widthFix" :src="item.thumb"/>
            </navigator>
        </view>
        
        <view class="show">
            <!-- 月份 -->
            <view class="month_warp">
                <view class="month_left">
                    <view class="month_date">
                        <text>{{monthes.DD}}&nbsp;/&nbsp;</text>
                        {{monthes.MM}}月
                    </view>
                    <view class="month_title">
                        {{monthes.title}}
                    </view>
                </view>
                <view class="month_right">
                    <text class="more">更多<text class="iconfont icon-you"/></text>
                </view>
            </view>
            <view class="content">
                <view class="content_items" v-for="(item,index) in monthes.items"
                :key="item.id">
                    <go-detail :list="monthes.items" :index="index">
                        <img mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"/>
                    </go-detail> 
                </view>
            </view>
        </view>
        <!-- 热门 -->
        <view class="hot_warp">
            <view class="hot_title">
                <text>热门</text>
            </view>
            <view class="hot_content">
                <view class="hot_items"
                v-for="(item,index) in hots"
                :key="item.id"
                >
                <go-detail :list="hots" :index="index">
                    <image mode="widthFix" :src ="item.thumb"/>
                </go-detail>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail";
export default {
    components:{
        goDetail
    },
    data(){
        return{
            // 推荐列表
            recommends:[],
            // 月份
            monthes:{},
            // 热门
            hots:[],
            // 请求的参数
            params:{
                 //要获取几条数据
                limit:30,
                // 关键字
                order:"hot",
                // 要跳过几条
                skip:0
            },
            // 是否还有下一页
            hasMore:true
        }
    },
    mounted() {
      this.getList();
   },
   methods:{
        //获取接口的数据
       getList(){
            this.request({
           url:"http://157.122.54.189:9088/image/v3/homepage/vertical",
           data:this.params
            })
            .then(result=>{
                console.log(result);
                // 判断还有没有下一页数据
                if(result.res.vertical.length === 0){
                    this.hasMore = false;
                    uni.showToast({
                    title:"没有更多数据了",
                    icon:"none"
                    });
                    return;
                }
                if(this.recommends.length === 0){
                    // 第一次发送的请求
                    // 推荐模块
                    this.recommends = result.res.homepage[1].items;
                    // 月份模块
                    this.monthes = result.res.homepage[2];
                    // 将时间改成 日期/月份 使用moment.js插件
                    this.monthes.MM = moment(this.monthes.stime).format('MM');
                    this.monthes.DD = moment(this.monthes.stime).format('DD'); 
                } 
                // 热门模块 获取热门数据的列表
                // 数组拼接 es6
                this.hots =[...this.hots,...result.res.vertical];
        
            })
       },
        // 滚动条触底事件
       hanleTolower(){
        //1.修改参数 skip+=limit
        // 2.重新发送请求
        // 3.请求回来 成功 hots数据的叠加
        if(this.hasMore){
            this.params.skip += this.params.limit;
            this.getList();
        }else{
            uni.showToast({
                title:"没有数据了",
                icon:"none"
            })
        }
       }
   }
}
</script>

<style lang="scss" scoped>
.recom_scroll{
    // height:屏幕的高度-头部标题的高度
    height: calc( 100vh - 36px );
}
    .recom_warp{
        display:flex;
        flex-wrap: wrap;
        .recom_item{
            width:50%;
            border:5rpx solid #fff;
        }
    }
    .show{
        .month_warp{
            display:flex;
            justify-content:space-between;
            padding:10rpx;
            .month_left{
                font-weight:600;
                color:$color;
                display:flex;
                .month_date{
                    font-size:30rpx;
                    text{
                        font-size:36rpx;
                    }
                }
                .month_title{
                    font-size:34rpx;
                    color:#666;
                    margin-left:30rpx;
                }
            }
            .month_right{
                font-size:24rpx;
                padding:10rpx;
                
            }
        }
        .content{
            display:flex;
            flex-wrap:wrap;
            .content_items{
                width:33.33%;
                border:4rpx solid #fff;
            }
        }
    }
    .hot_warp{
        .hot_title{
            font-size:34rpx;
            color:#666;
            font-weight:600;
            padding:10rpx 0;
            border-left:10rpx solid $color;
            margin-left:10rpx;
            text{
                margin-left:20rpx;
            }
        }
        .hot_content{
            display:flex;
            flex-wrap:wrap;
            .hot_items{
                width:33.33%;
                border:4rpx solid #fff;
            }
        }
    }
</style>